<template>
  <div class="dbant-query-main">

    <el-tabs v-model="queryTabs.activeTab" type="card" @tab-remove="removeTab">
      <el-tab-pane label="首页" name="home">
        <sql-editor />
      </el-tab-pane>
      <el-tab-pane v-for="item in queryTabs.tabs" :name="item.id" :key="item.id" closable>
        <!-- 右键菜单开始：自定义标签页显示名称，保证每个标签页都能实现右键菜单 -->
        <template #label>
          <el-dropdown trigger="contextmenu" :id="item.id" ref="dropdownRef">
            <span :class="queryTabs.activeTab === item.id ? 'label' : ''">{{
              item.title
            }}</span>
            <!-- <router-link :to="item.componentName" v-else>
            <span>{{ item.title }}</span>
          </router-link> -->
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="removeTab(item.id)">
                  <el-icon>
                    <Close />
                  </el-icon>关闭当前标签页
                </el-dropdown-item>
                <el-dropdown-item @click="removeTab(item.id, 'left')" v-if="show(item.id, 'left')">
                  <el-icon>
                    <DArrowLeft />
                  </el-icon>关闭左侧标签页
                </el-dropdown-item>
                <el-dropdown-item @click="removeTab(item.id, 'right')" v-if="show(item.id, 'right')">
                  <el-icon>
                    <DArrowRight />
                  </el-icon>关闭右侧标签页
                </el-dropdown-item>
                <el-dropdown-item @click="removeTab(item.id, 'other')" v-if="tabList.length > 1">
                  <el-icon>
                    <Operation />
                  </el-icon>关闭其他标签页
                </el-dropdown-item>
                <el-dropdown-item @click="removeTab(item.id, 'all')">
                  <el-icon>
                    <Minus />
                  </el-icon>关闭全部标签页
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        

          <!-- 右键菜单结束 -->
          <component :is="item.componentName" v-bind="item.data"> </component>
          <!-- <router-view v-else v-bind="item.data"></router-view> -->
          <!-- <router-view
          v-else
          :route="getRouter(item)"
          v-bind="item.data"
        ></router-view> -->
        
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
import { ref } from "vue";
import Home from "@/views/Home.vue";
import SqlEditor from "./sql-editor.vue";
export default {
  name: "QueryMain",
  components: {
    Home: Home,
    SqlEditor: SqlEditor,
  },
  props: {
    queryTabs: Object,
  },
  data() {
    return {
      tabList: ref([]), //存放标签页数组
      tabValue: ref(null), //存放当前激活标签页，默认激活首页
      dropdownRef: ref(),
      list: {},
      search: {
        keyword: "",
        queryTabs: Object,
      },
    };
  },
  watch: {
    queryTabs: (newValue, oldValue) => {
      console.log("数据变化了");
    },
  },
  created() {
    if (!this.queryTabs.activeTab) {
      this.queryTabs.activeTab = "home";
    }
    this.$emit("update:queryTabs", this.queryTabs);
  },
  computed: {},
  mounted() { },
  methods: {
    addTab(tab) {
      //保证相同组件路径标签页 name 标识唯一
      const name = `${tab.id}_${Date.now()}`;
      this.tabList.value.push({
        ...tab,
        name,
      });
      tabValue.value = name;
    },
    show(id, type) {
      const index = this.queryTabs.tabs.findIndex((item) => id === item.id);
      return type === "left"
        ? index !== 0
        : index !== this.queryTabs.tabs.length - 1;
    },

    removeTab(targetId, type) {
      switch (type) {
        case "all": //关闭全部标签页
          this.queryTabs.clearTabs();
          if (!this.queryTabs.activeTab) {
            this.queryTabs.activeTab = "home";
          }
          break;
        case "other": //关闭其他标签页
          this.queryTabs.removeOtherTab(targetId);
          break;
        case "left": //关闭左侧标签页
          this.queryTabs.removeLeftTab(targetId);
          if (!this.queryTabs.activeTab) {
            this.queryTabs.activeTab = "home";
          }
          break;
        case "right": //关闭右侧标签页
          this.queryTabs.removeRightTab(targetId);
          if (!this.queryTabs.activeTab) {
            this.queryTabs.activeTab = "home";
          }
          break;
        default:
          this.queryTabs.removeTab(targetId);
          if (!this.queryTabs.activeTab) {
            this.queryTabs.activeTab = "home";
          }
          break;
      }
    },
    handleChange: (visible, name) => {
      if (!visible) return;
      debugger
      this.dropdownRef.value.forEach((item) => {
        if (item.id === name) return;
        item.handleClose();
      });
    },
  },
};
</script>

<style lang="scss"  scoped>
.dbant-query-main {
  flex-direction: column;
  top: 0px;
    height: 100%;
}

.label {
  color: var(--el-color-primary); //激活标签页高亮
}

.tags-content {
  width: 100%;
}

:deep(.el-tabs__item) {
  &:hover {
    span {
      color: var(--el-color-primary); //鼠标移到标签页高亮
    }
  }

  .el-dropdown {
    line-height: inherit; // 统一标签页显示名称行高
  }
}

:deep(.el-tabs__content) {
    height: 100%;

  .el-tab-pane {

    box-sizing: border-box;
    outline: none;
    width: 100%;
      height: 100%;
  }
}

.el-tabs {
  width: 100%;
height: 100%;
}

:deep(.el-tabs__header) {
  background: #ffff;
  margin: 0 0 0px;
}
</style>
